<template>
  <div id="app" :class="{ 'exam-mode': isExamMode, 'linux': osInfo.isLinux, 'windows': osInfo.isWindows }">
    <!-- 状态栏 -->
    <div class="status-bar" :class="isExamMode ? 'locked' : 'unlocked'">
      <div class="status-content">
        <span class="status-icon">{{ isExamMode ? '🔒' : '🔓' }}</span>
        <span class="status-text">{{ statusMessage }}</span>
        <span class="os-info">{{ osInfo.platform }} {{ osInfo.isDeepin ? '(Deepin)' : '' }}</span>
      </div>
    </div>

    <!-- 控制按钮 -->
    <div class="control-bar">
      <button
          @click="toggleExamMode"
          :class="['exam-btn', isExamMode ? 'active' : 'inactive']"
      >
        {{ isExamMode ? '解锁系统' : '锁定系统' }}
      </button>
    </div>

    <!-- 答题区域 -->
    <div class="exam-content">
      <h2>跨平台考试系统</h2>

      <div class="question" v-for="(question, index) in questions" :key="index">
        <h3>第{{ index + 1 }}题：{{ question.title }}</h3>
        <textarea
            v-model="question.answer"
            placeholder="点击这里开始答题..."
            rows="3"
        ></textarea>
      </div>

      <!-- 系统特性说明 -->
      <div class="system-features">
        <h4>🎯 系统特性</h4>
        <div class="features-grid">
          <div class="feature-item" v-for="feature in systemFeatures" :key="feature">
            <span class="icon">✅</span>
            <span>{{ feature }}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'

// 类型定义
interface Question {
  title: string
  answer: string
}

interface OSInfo {
  platform: string
  isLinux: boolean
  isWindows: boolean
  isDeepin: boolean
}

interface ExamModeStatus {
  isExamMode: boolean
}

// 响应式数据
const isExamMode = ref<boolean>(false)
const osInfo = ref<OSInfo>({
  platform: 'unknown',
  isLinux: false,
  isWindows: false,
  isDeepin: false
})

const questions = ref<Question[]>([
  { title: '1. 跨平台开发的优势有哪些？', answer: '' },
  { title: '2. Electron 的工作原理是什么？', answer: '' },
  { title: '3. 如何实现系统级的安全锁定？', answer: '' }
])

const systemFeatures = ref<string[]>([
  '支持 Windows 和 Linux 系统',
  '系统级快捷键屏蔽',
  '窗口完全锁定',
  '防止任务切换',
  '安全的答题环境',
  '跨平台兼容性'
])

// 计算属性
const statusMessage = computed(() => {
  if (isExamMode.value) {
    return '系统已完全锁定 - 只能答题'
  } else {
    return `系统正常 - ${osInfo.value.platform} 平台`
  }
})

// 生命周期
onMounted(async () => {
  await getOSInfo()
  await checkExamModeStatus()
})

// 方法
const toggleExamMode = async (): Promise<void> => {
  try {
    if (window.electronAPI) {
      const result = await window.electronAPI.toggleExamMode()
      isExamMode.value = result.isExamMode
    } else {
      isExamMode.value = !isExamMode.value
    }
  } catch (error) {
    console.error('切换考试模式失败:', error)
  }
}

const checkExamModeStatus = async (): Promise<void> => {
  try {
    if (window.electronAPI) {
      const result = await window.electronAPI.getExamModeStatus()
      isExamMode.value = result.isExamMode
    }
  } catch (error) {
    console.error('检查状态失败:', error)
  }
}

const getOSInfo = async (): Promise<void> => {
  try {
    if (window.electronAPI) {
      osInfo.value = await window.electronAPI.getOSInfo()
    } else {
      // 浏览器环境模拟
      const platform = navigator.platform.toLowerCase()
      osInfo.value = {
        platform: platform.includes('win') ? 'win32' :
            platform.includes('linux') ? 'linux' : 'browser',
        isLinux: platform.includes('linux'),
        isWindows: platform.includes('win'),
        isDeepin: false
      }
    }
  } catch (error) {
    console.error('获取系统信息失败:', error)
  }
}
</script>

<style scoped>
* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: Arial, sans-serif;
  background: #f5f5f5;
}

#app {
  padding: 20px;
  max-width: 800px;
  margin: 0 auto;
  min-height: 100vh;
}

#app.exam-mode {
  background: #fff2e8;
}

#app.linux {
  border-left: 4px solid #1793d1;
}

#app.windows {
  border-left: 4px solid #0078d7;
}

/* 状态栏 */
.status-bar {
  padding: 15px;
  border-radius: 8px;
  margin-bottom: 20px;
  font-weight: bold;
}

.status-bar.locked {
  background: #ffccc7;
  border: 2px solid #ff4d4f;
  color: #a8071a;
}

.status-bar.unlocked {
  background: #d9f7be;
  border: 2px solid #52c41a;
  color: #389e0d;
}

.status-content {
  display: flex;
  align-items: center;
  gap: 10px;
}

.status-icon {
  font-size: 20px;
}

.status-text {
  font-size: 16px;
  font-weight: bold;
}

.os-info {
  margin-left: auto;
  font-size: 12px;
  opacity: 0.7;
}

/* 控制栏 */
.control-bar {
  background: white;
  padding: 15px;
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
  margin-bottom: 20px;
  text-align: center;
}

.exam-btn {
  padding: 12px 30px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 16px;
  font-weight: bold;
  transition: all 0.3s;
  min-width: 150px;
}

.exam-btn.active {
  background: #ff4d4f;
  color: white;
}

.exam-btn.inactive {
  background: #52c41a;
  color: white;
}

.exam-btn:hover {
  opacity: 0.8;
}

/* 答题区域 */
.exam-content {
  background: white;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.question {
  margin-bottom: 20px;
}

.question h3 {
  margin: 0 0 10px 0;
  color: #333;
}

textarea {
  width: 100%;
  padding: 12px;
  border: 2px solid #e8e8e8;
  border-radius: 5px;
  resize: vertical;
  font-size: 14px;
  transition: border-color 0.3s;
}

textarea:focus {
  outline: none;
  border-color: #1890ff;
  box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
}

/* 系统特性 */
.system-features {
  margin-top: 30px;
  padding: 20px;
  background: #f6ffed;
  border: 1px solid #b7eb8f;
  border-radius: 8px;
}

.system-features h4 {
  margin: 0 0 15px 0;
  color: #389e0d;
}

.features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 10px;
}

.feature-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px;
}
</style>